<template>
  <div class="order-wrap">
    <p class="order-no">
      <span>订单编号：{{orderParam.order_num}}</span>
      <span>{{orderParam.pay_tm}}</span>
    </p>
    <div class="order-content">
      <img :src="'https://img.yzcdn.cn/vant/cat.jpeg'" alt />
      <div class="content-right">
        <div>
          <p>{{orderParam.product_name}}</p>
          <span>
            <em>&yen;{{orderParam.product_price}}</em>
            <br />
            <i>x{{orderParam.product_count}}</i>
          </span>
        </div>
        <p align="right">共{{orderParam.product_count}}件商品 合计：&yen;{{orderParam.amt}}</p>
      </div>
    </div>
    <div class="order-btn">
      <van-button
        type="default"
        class="gray-btn"
        @click="cancelOrder(orderParam.order_id,orderParam.user_id)"
        v-if="orderParam.stat < 3"
      >取消订单</van-button>

      <van-button
        type="default"
        class="gray-btn"
        v-if="orderParam.stat == 4 || orderParam.stat == 3"
      >待发货</van-button>
      <van-button type="default" class="gray-btn black-btn" v-if="orderParam.stat == 5">确认收货</van-button>
      <van-button
        type="primary"
        @click="payOrder(orderParam.order_id)"
        v-if="orderParam.stat < 3"
      >付款 {{orderParam.amt}}</van-button>
    </div>
  </div>
</template>
<script>
import * as orders from "@/api/products.js";
import { getWxConfig } from "@/api/mine.js";
import { mapGetters } from "vuex";
import { Dialog, Toast } from "vant";
var wx = require("weixin-js-sdk");
export default {
  props: ["orderParam"],
  data() {
    return {
      callPayData: {}
    };
  },
  computed: {
    ...mapGetters(["userId"])
  },
  created() {},
  mounted() {
    getWxConfig().then(res => {
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appId, // 必填，公众号的唯一标识
        timestamp: res.timeStamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名
        jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
      });
      wx.ready(function() {
        wx.checkJsApi({
          jsApiList: ["chooseWXPay"],
          success: function() {},
          fail: function() {}
        });
      });
    });
  },
  methods: {
    // 付款
    payOrder(id) {
      let that = this;
      Dialog.confirm({
        title: "订单付款",
        message: "确定对该订单进行付款?"
      })
        .then(() => {
          orders
            .ordersPay({
              //购买订单
              order_id: id,
              user_id: this.userId ? this.userId : ""
            })
            .then(res => {
              wx.ready(function() {
                wx.chooseWXPay({
                  timestamp: res.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                  nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
                  package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                  signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                  paySign: res.paySign, // 支付签名
                  success: function() {
                    // 支付成功后的回调函数
                    Toast({
                      message: "支付成功!",
                      overlay: true,
                      loadingType: "spinner",
                      onClose: () => {
                        that.$router.go(-1);
                      }
                    });
                  }
                });
              });
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 取消订单
    cancelOrder(id, userId) {
      Dialog.confirm({
        title: "取消订单",
        message: "确定取消该订单?"
      })
        .then(() => {
          let params = {
            id: id,
            user_id: userId
          };
          orders.ordersCancel(params).then(res => {
            // eslint-disable-next-line
            console.log(res);
            this.$router.go(0);
          });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>
<style lang="less" scoped>
.order-wrap {
  background: white;
  border-radius: @border-radius;
  padding: 6px;
  font-size: 12px;
  margin-bottom: 10px;
}
.order-content {
  display: flex;
  align-items: center;
  img {
    width: 90px;
    height: 90px;
    border-radius: @border-radius;
  }
  .content-right {
    flex: 1;
    display: flex;
    height: 90px;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    div {
      display: flex;
      align-items: flex-start;
      p {
        flex: 1;
        font-size: 14px;
      }
      span {
        text-align: right;
      }
      i {
        color: #999999;
      }
    }
  }
}
.order-no {
  color: #cccccc;
  font-size: 12px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.order-btn {
  text-align: right;
  margin-top: 10px;
  button {
    height: 32px;
    line-height: 30px;
    margin-left: 10px;
    font-size: 12px;
    &.gray-btn {
      color: #999999;
      border: 1px solid #cccccc;
      &.black-btn {
        color: @first-color;
        border-color: @first-color;
      }
    }
  }
}
</style>